/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="play-list-container">
    <div
      v-if="isLargerPage"
      class="go-back-out"
      @click="goBack"
      :style="{
        paddingTop: `${topAvoidArea ? topAvoidArea : 8}px`,
      }"
    >
      <img src="../../assets/playList/back.png" class="go-back" />
    </div>
    <div>
      <div :class="{ 'container-other-obj': isLargerPage }">
        <PlaylistHeader
          v-if="!isLargerPage"
          :songsLength="songs.length"
          v-bind="$props"
          :topAvoidArea="topAvoidArea"
        />
        <PlaylistHeaderTable v-if="isLargerPage" :bottomAvoidArea="bottomAvoidArea"/>
        <div class="listOut">
          <div v-if="isLargerPage" class="list-header">
            <img
              src="../../assets/playList/play_icon.png"
              class="list-header-image"
            />
            <span class="list-header-text">播放全部</span>
            <span class="list-header-text">{{ songs.length }}</span>
            <div class="flex-style" />
            <img src="../../assets/playList/show_all.png" class="open-icon" />
          </div>
          <div class="table-list" :style="tableListStyle">
            <div class="tableListInner">
              <MultiGridRow
                :columns="{ xs: 12, sm: 12, md: 12, lg: 8, xl: 8 }"
                :gutter="{ x: { xs: 0, sm: 0, md: 24, lg: 24, xl: 24 } }"
                :style="{
                  marginLeft: distanceBorderLift + 'px',
                  marginRight: distanceBorderRight + 'px',
                  width: 'auto',
                  marginBottom: bottomAvoidArea ? '120px' : '70px',
                }"
              >
                <MultiGridCol
                  v-for="(item, index) in songs"
                  :key="index"
                  class="song-item"
                  :span="{ xs: 12, sm: 12, md: 6, lg: 4, xl: 4 }"
                >
                  <div class="song-info">
                    <div class="song-title">{{ item.title }}</div>
                    <div class="artist-container">
                      <img
                        src="../../assets/playList/acoustic.png"
                        class="acoustic"
                      />
                      <div class="song-artist">{{ item.artist }}</div>
                    </div>
                  </div>
                  <div class="flex-style" />
                  <img
                    src="../../assets/playList/song_item_icon.png"
                    class="song-icon"
                    :style="{
                      paddingRight: songIconLift + 'px',
                    }"
                  />
                </MultiGridCol>
              </MultiGridRow>
            </div>
          </div>
        </div>
      </div>
    </div>
    <CurPlaySong :song="songs[0]" :bottomAvoidArea="bottomAvoidArea" />
  </div>
</template>

<script lang="ts">
import { songs } from './model';
import CurPlaySong from './components/CurPlaySong.vue';
import PlaylistHeaderTable from './components/PlaylistHeaderTable.vue';
import PlaylistHeader from './components/PlaylistHeader.vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import { MultiGridRow, MultiGridCol } from '@hadss/web_adaptive_layout_vue2';
import {
  AvoidArea,
  AvoidAreaInfo,
  AvoidAreaType,
} from '../../common/windowCommon';

export default {
  name: 'SongTable',
  components: {
    CurPlaySong,
    PlaylistHeaderTable,
    PlaylistHeader,
    MultiGridRow,
    MultiGridCol,
  },
  data() {
    return {
      songs: songs,
      splitLine: false,
      //  断点对象
      unsubscribe: null,
      breakpointManager: new BreakpointManager(),
      //是否是pad以及是否比pad屏幕要大
      isLargerPage: false,
      // 距离边框的值
      distanceBorderLift: 16,
      distanceBorderRight: 16,
      // 列表具体顶部的间距
      distanceTableTop: 0,
      // 更多按钮距离右边的间距
      songIconLift: 0,
      topAvoidArea: 0,
      bottomAvoidArea: 0,
    };
  },
  computed: {
    tableListStyle() {
      return {
        height: `calc(100vh - ${this.distanceTableTop}px)`,
      };
    },
  },
  mounted() {
    // 断点
    this.unsubscribe = this.breakpointManager.subscribeToBreakpoint(() => {
      this.isLargerPage = this.breakpointManager.useBreakpointValue({
        md: false,
        lg: true,
      });
      this.distanceBorderLift = this.breakpointManager.useBreakpointValue({
        sm: 16,
        md: 24,
      });
      this.distanceBorderRight = this.breakpointManager.useBreakpointValue({
        sm: 16,
        md: 0,
      });
      this.distanceTableTop = this.breakpointManager.useBreakpointValue({
        md: 320,
        lg: 100,
      });
      this.songIconLift = this.breakpointManager.useBreakpointValue({
        sm: 0,
        md: 24,
      });
    });
    if ((window as any).webClass) {
      const webClass = (window as any).webClass;
      const topArea = webClass.getAvoidArea(
        AvoidAreaType.TYPE_SYSTEM
      ) as AvoidArea;
      const bottomArea = webClass.getAvoidArea(
        AvoidAreaType.TYPE_NAVIGATION_INDICATOR
      ) as AvoidArea;
      this.topAvoidArea = webClass.pxToVp(topArea.topRect.height);
      this.bottomAvoidArea = webClass.pxToVp(bottomArea.bottomRect.height);
    }
    window.addEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },
  beforeDestroy() {
    // 销毁断点对象
    if (this.unsubscribe) {
      this.unsubscribe();
    }
    window.removeEventListener('resize', this.handleResize);
    window.removeEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    handleAvoidAreaChange(event: any) {
      const data = event.detail as AvoidAreaInfo;
      const areaType = data.type;
      if (areaType === AvoidAreaType.TYPE_SYSTEM) {
        this.topAvoidArea = (window as any).webClass?.pxToVp(
          data.area.topRect.height
        );
      }
      if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        this.bottomAvoidArea = (window as any).webClass?.pxToVp(
          data.area.bottomRect.height
        );
      }
    },
  },
};
</script>

<style scoped>
.play-list-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.song-item {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ddd;
  height: 64px;
  align-items: center;
}

.song-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.9);
}

.song-artist {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin-left: 4px;
  line-height: 16px;
}

.artist-container {
  display: flex;
  flex-direction: row;
  margin-top: 2px;
}

.song-icon {
  width: 20px;
  height: 20px;
}

.acoustic {
  width: 16px;
  height: 16px;
}

.list-header {
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 32px;
}

.list-header-image {
  width: 32px;
  height: 32px;
}

.list-header-text {
  margin-left: 8px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  line-height: 24px;
}

.open-icon {
  width: 20px;
  height: 20px;
  margin-right: 24px;
}

.go-back {
  width: 40px;
  height: 40px;
}

.go-back-out {
  height: 56px;
  display: flex;
  cursor: pointer;
  margin-left: 24px;
}

.list-out {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.flex-style {
  flex: 1;
}

.container-other-obj {
  display: flex;
}
.table-list {
  overflow-y: scroll;
}
.listOut {
  flex: 1;
}
.song-item-bottom {
  padding: 100px 0;
}
</style>
